import { useNavigate, useParams } from "react-router-dom";
import classNames from "classnames";
import styles from "@styles/home/widghts/channel/styles/styles.module.less";
import { useRequestUserChannelsQuery } from "@service/channel";

export default function UserChannel() {
    ;
    // 获取路由参数
    const { cid } = useParams();
    // 获取用于实现页面跳转的方法
    const navigate = useNavigate();
    const { data } = useRequestUserChannelsQuery(undefined);


    // 渲染视图
    return (
        <div className={styles.list}>
            {data?.data.channels.map((channel) => (
                <div
                    key={channel.id}
                    className={classNames(styles.item, {
                        [styles.active]: channel.id === Number(cid),
                    })}
                    onClick={() => navigate(`/${channel.id}`)}
                >
                    {channel.name}
                </div>
            ))}
        </div>
    )
}